<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar title="代金卡"></tui-navigation-bar>

    <my-container :data="cardList" refresh @refresh="getMemberCardList">
      <view class="container">
        <section class="card-list" v-for="card in cardList" :key="card.id" @click="getMemberCardDetail(card.id)">
          <view class="is-flex justify-between border-bottom header">
            <view class="name">{{ card.bname }}</view>
            <view class="id">{{ card.cardnum }}</view>
          </view>
          <view class="is-flex items-center content">
            <image src="/static/images/gift-card/gift-card.png" mode="widthFix" style="width: 70px"></image>
            <view class="is-flex-col pl-5">
              <view class="title">{{ card.title }}</view>
              <view class="time">有效期 : {{ card.limittime ? `请在 ${card.limittime} 前使用` : '' }}</view>
              <view class="price">余额 : {{ card.money }}</view>
            </view>
          </view>
          <view class="is-flex justify-end foot">
            <view class="gold-btn">详情</view>
          </view>
        </section>
      </view>

      <my-modal ref="giftCardDetail" title="卡券详情">
        <view class="container" style="color: #c8cee1">
          <my-row title="卡券编号" :value="$format(selectGiftCardDetail, 'cardnum')" padding="10px 0"></my-row>
          <my-row v-if="$format(selectGiftCardDetail, 'title')" title="卡券名称" :value="selectGiftCardDetail.title" padding="10px 0"></my-row>
          <my-row title="所属商家" :value="$format(selectGiftCardDetail, 'bname')" padding="10px 0"></my-row>
          <my-row title="代金卡余额" :value="$format(selectGiftCardDetail, 'money')" padding="10px 0"></my-row>
          <my-row title="获取时间" :value="$format(selectGiftCardDetail, 'createtime')" padding="10px 0"></my-row>
          <my-row v-if="$format(selectGiftCardDetail, 'effectivetime') != '0'" title="生效时间" :value="$format(selectGiftCardDetail, 'effectivetime')" padding="10px 0"></my-row>
          <my-row title="过期时间" :value="$format(selectGiftCardDetail, 'limittime')" padding="10px 0"></my-row>
          <view v-if="$format(selectGiftCardDetail, 'qrcode')" class="is-flex justify-center mt-5 mb-5">
            <image :src="$utils.base64Img(selectGiftCardDetail.qrcode)" style="width: 100px; margin-top: 20px" mode="widthFix"></image>
          </view>

          <view v-if="$format(selectGiftCardDetail, 'useinfo')" class="fs-xxs mt-25">
            <p class="mb-5">使用说明:</p>
            <view style="color: #6a78a3">{{ $format(selectGiftCardDetail, 'useinfo', '') }}</view>
          </view>
        </view>
      </my-modal>
    </my-container>

    <my-loading ref="loading"></my-loading>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectGiftCardDetail: null, // 选中的代金卡详情
      cardList: null
      // [
      //   {
      //     id: 123,
      //     limittime: '2021-04-11 17:07:18',
      //     money: 5000,
      //     cardnum: '00045638',
      //     title: '5000元代金卡',
      //     bname: '先动ktv-12'
      //   },
      //   {
      //     id: 123,
      //     limittime: '2021-04-11 17:07:18',
      //     money: 5000,
      //     cardnum: '00045638',
      //     title: '5000元代金卡',
      //     bname: '先动ktv-12'
      //   }
      // ]
    }
  },
  onShow() {
    this.initLoginInfo().then(res => {
      this.getMemberCardList()
    })
  },
  methods: {
    openGiftCardModal(param) {
      this.$refs.giftCardDetail.open({ showClose: this.$format(param, 'showClose', true) })
    },
    closeGiftCardModal() {
      this.$refs.giftCardDetail.close()
    },
    /**
     * 获取会员代金卡列表
     * 场景：首页
     */
    getMemberCardList() {
      const baseParam = this.getBase(['token', 'selectuniacid', 'usertoken'])
      if (!baseParam) return
      console.param('获取会员代金卡列表', baseParam)
      this.$refs.loading.open()
      this.$api
        .getMemberCardList(baseParam)
        .then(res => {
          console.res('获取会员代金卡列表', res)
          this.cardList = this.$format(res, 'data', null)
        })
        .catch(err => {
          console.err('获取会员代金卡列表', err)
          this.errMsg(err, '获取会员代金卡列表失败')
        })
        .finally(() => {
          this.$refs.loading.close()
        })
    },
    /**
     * 获取用户代金卡详情
     * 场景：会员充值
     */
    getMemberCardDetail(id) {
      if (!id) return this.$msg('text', '代金卡id为空')
      const baseParam = this.getBase(['token', 'selectuniacid', 'usertoken'])
      if (!baseParam) return
      Object.assign(baseParam, { id: id })
      // this.$refs.loading.open()
      console.param('获取用户代金卡详情', baseParam)
      this.$api
        .getMemberCardDetail(baseParam)
        .then(res => {
          console.res('获取会员代金卡详情', res)
          this.selectGiftCardDetail = this.$format(res, 'data')
          if (this.$isEmpty(this.selectGiftCardDetail)) {
            this.$msg('text', '代金卡详情为空')
          }
          this.openGiftCardModal()
        })
        .catch(err => {
          console.err('获取会员代金卡详情', err)
          this.errMsg(err, '获取会员代金卡详情失败')
        })
      // .finally(() => {
      //   this.$refs.loading.close()
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.card-list {
  background: #333952;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  margin-bottom: 15px;

  .header {
    padding: 10px 15px;
    .name {
      color: $color-primary-grey-text;
    }
    .id {
      color: $gold;
    }
  }
  .content {
    padding: 15px 5px 5px 5px;
    font-size: $font-size-xs;
    .title {
      font-size: $font-size-base;
      font-weight: bold;
      color: $color-base-white;
    }
    .time {
      color: $color-primary-grey-text;
      padding: 2px 0;
    }
    .price {
      color: $gold;
    }
  }
  .foot {
    padding: 0 15px 10px 0;
    .gold-btn {
      font-size: $font-size-xs;
      padding: 3px 10px;
      border-radius: 10px;
    }
  }
}
</style>
